<template>
    <view class="container">
        <!-- 顶部信息 -->
        <view class="header">
            <view class="info-item">
                <text class="label">检测ID:</text>
                <text class="value">{{ id }}</text>
            </view>
            <view class="info-item">
                <text class="label">检测时间:</text>
                <text class="value">{{ create_time }}</text>
            </view>
        </view>

        <!-- 查看舌苔详情按钮 -->
        <button class="tongue-detail-btn" @click="viewTongueDetail" v-if="tongueDiagnosisId">
            <uni-icons type="eye-filled" size="20" color="#FFFFFF"></uni-icons>
            <text class="btn-text">查看舌苔详细特征</text>
        </button>

        <!-- 分析结果卡片 -->
        <view class="result-cards">
            <!-- 舌苔分析 -->
            <view class="card">
                <view class="card-header">
                    <uni-icons type="eye" size="24" color="#4FD1C5"></uni-icons>
                    <text class="title">舌苔分析</text>
                </view>
                <view class="card-content">
                    <text class="content-text">{{ TongueCoatingAnalysis }}</text>
                </view>
            </view>

            <!-- 健康分析 -->
            <view class="card">
                <view class="card-header">
                    <uni-icons type="heart" size="24" color="#4FD1C5"></uni-icons>
                    <text class="title">健康分析</text>
                </view>
                <view class="card-content">
                    <text class="content-text">{{ HealthAnalysis }}</text>
                </view>
            </view>

            <!-- 易患疾病 -->
            <view class="card">
                <view class="card-header">
                    <uni-icons type="info" size="24" color="#4FD1C5"></uni-icons>
                    <text class="title">易患疾病</text>
                </view>
                <view class="card-content">
                    <text class="content-text">{{ ProneDiseases }}</text>
                </view>
            </view>

            <!-- 调理方案 -->
            <view class="card">
                <view class="card-header">
                    <uni-icons type="help" size="24" color="#4FD1C5"></uni-icons>
                    <text class="title">调理方案</text>
                </view>
                <view class="card-content">
                    <text class="content-text">{{ RegulationPlan }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import { dateTimeFormat } from '@/utils/system'
import request from '@/utils/request'

// 定义响应式数据
const id = ref('')
const create_time = ref('')
const TongueCoatingAnalysis = ref('')
const HealthAnalysis = ref('')
const ProneDiseases = ref('')
const RegulationPlan = ref('')
const tongueDiagnosisId = ref('')

// 查看舌苔详情
const viewTongueDetail = async () => {
    // 发起get请求根据id获取舌苔详情数据
    const ress = await request.get("/tongue/" + tongueDiagnosisId.value);
    uni.navigateTo({
            url: '/pages/tongue/result',
            success: function(res) {
                res.eventChannel.emit('acceptDataFromOpenerPage', {
                    imageUrl: ress.data.imageUrl,
                    createTime: ress.data.createTime,
                    coatingQuality: ress.data.coatingQuality,
                    coatingColor: ress.data.coatingColor,
                    tongueColor: ress.data.tongueColor,
                    tongueVitality: ress.data.tongueVitality,
                    tongueShape: ress.data.tongueShape
                })
            }
        })
}

onMounted(() => {
		const data = uni.getStorageSync("evaluateResult")
		id.value = data.id
		create_time.value = dateTimeFormat(data.createTime)
		TongueCoatingAnalysis.value = data.tongueCoatingAnalysis
		HealthAnalysis.value = data.healthAnalysis
		ProneDiseases.value = data.proneDiseases
		RegulationPlan.value = data.regulationPlan
		tongueDiagnosisId.value = data.tongueDiagnosisId
		uni.removeStorageSync("evaluateResult")
})
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background: #f5f6fa;
    padding: 30rpx;
}

.header {
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx 30rpx;
    margin-bottom: 30rpx;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

    .info-item {
        .label {
            font-size: 24rpx;
            color: #666;
            margin-right: 10rpx;
        }

        .value {
            font-size: 24rpx;
            color: #333;
            font-weight: 500;
        }
    }
}

.result-cards {
    .card {
        background: #fff;
        border-radius: 16rpx;
        padding: 30rpx;
        margin-bottom: 30rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

        &:last-child {
            margin-bottom: 0;
        }

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;

            .title {
                font-size: 36rpx;
                font-weight: bold;
                color: #333;
                margin-left: 16rpx;
            }
        }

        .card-content {
            .content-text {
                font-size: 32rpx;
                color: #666;
                line-height: 1.8;
            }
        }
    }
}

.tongue-detail-btn {
    background-color: #4FD1C5;
    color: #FFFFFF;
    border-radius: 16rpx;
    padding: 20rpx 30rpx;
    margin: 0 30rpx 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 2rpx 10rpx rgba(79, 209, 197, 0.3);

    &::after {
        border: none;
    }

    .btn-text {
        margin-left: 10rpx;
        font-size: 28rpx;
    }
}

.tongue-detail-btn:active {
    opacity: 0.8;
}
</style>